<script lang="ts" setup>
// 组件逻辑
</script>

<template>
  <div class="rules-usage-guide">
    <div class="guide-header">
      <h2>📋 调度规则使用场景示例与操作指南</h2>
      <p class="guide-subtitle">
        详细的操作步骤和配置说明，帮助您快速上手调度规则管理
      </p>
    </div>

    <!-- 操作流程说明 -->
    <div class="guide-section">
      <div class="section-header">
        <h3>🔄 标准操作流程</h3>
      </div>
      <div class="section-content">
        <ol class="process-list">
          <li>创建规则 → 配置规则类型和参数 → 设置优先级 → 关联资源</li>
          <li>在资源分类管理中关联规则到分类</li>
          <li>在资源模板管理中设置模板的调度规则</li>
          <li>监控规则执行效果，定期优化调整</li>
        </ol>
      </div>
    </div>

    <!-- 规则类型说明 -->
    <div class="guide-section">
      <div class="section-header">
        <h3>🎯 规则类型详细说明</h3>
      </div>
      <div class="section-content">
        <div class="rule-type-section">
          <h4>📊 优先级规则 (PRIORITY)</h4>
          <p>定义资源分配的优先级顺序，数值越大优先级越高</p>
          <ul>
            <li>VIP客户优先级：90-100</li>
            <li>普通客户优先级：50-80</li>
            <li>系统默认优先级：10-40</li>
          </ul>
        </div>
        <div class="rule-type-section">
          <h4>⏰ 时间段规则 (TIME_SLOT)</h4>
          <p>限制资源使用的时间范围，支持工作日、节假日等配置</p>
          <ul>
            <li>工作时间：09:00-18:00</li>
            <li>营业时间：08:00-22:00</li>
            <li>特殊时段：节假日、活动期间</li>
          </ul>
        </div>
        <div class="rule-type-section">
          <h4>📦 容量规则 (CAPACITY)</h4>
          <p>控制资源的最大使用容量，防止超负荷运行</p>
          <ul>
            <li>最大并发数：限制同时使用人数</li>
            <li>日使用上限：限制每日使用次数</li>
            <li>周使用上限：限制每周使用次数</li>
          </ul>
        </div>
        <div class="rule-type-section">
          <h4>⚠️ 冲突检测规则 (CONFLICT)</h4>
          <p>检测和防止资源使用冲突，确保资源分配的唯一性</p>
          <ul>
            <li>时间冲突：检测时间重叠</li>
            <li>人员冲突：检测人员重复分配</li>
            <li>设备冲突：检测设备重复使用</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 酒店业态详细示例 -->
    <div class="guide-section">
      <div class="section-header">
        <h3>🏨 酒店业态 - 客房调度规则配置</h3>
      </div>
      <div class="section-content hotel-example">
        <div class="config-section">
          <h4>📝 VIP客户优先规则配置</h4>
          <ul>
            <li>规则名称：VIP客户优先</li>
            <li>规则编码：VIP_PRIORITY_RULE</li>
            <li>规则类型：优先级规则</li>
            <li>优先级：95</li>
            <li>描述：VIP客户享有最高优先级预订权</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>⏰ 工作时间限制规则配置</h4>
          <ul>
            <li>规则名称：工作时间限制</li>
            <li>规则编码：WORK_TIME_LIMIT_RULE</li>
            <li>规则类型：时间段规则</li>
            <li>优先级：80</li>
            <li>时间范围：09:00-18:00（工作日）</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>📦 客房容量规则配置</h4>
          <ul>
            <li>规则名称：客房容量检查</li>
            <li>规则编码：ROOM_CAPACITY_RULE</li>
            <li>规则类型：容量规则</li>
            <li>优先级：70</li>
            <li>容量限制：每间房最多2人入住</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>📋 操作步骤</h4>
          <ol>
            <li>点击"新增规则" → 选择规则类型 → 填写基本信息</li>
            <li>配置规则参数（优先级、时间范围、容量限制等）</li>
            <li>设置规则状态为"激活"</li>
            <li>在分类管理中关联到"客房资源分类"</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- 温泉洗浴业态详细示例 -->
    <div class="guide-section">
      <div class="section-header">
        <h3>♨️ 温泉洗浴业态 - 温泉池调度规则配置</h3>
      </div>
      <div class="section-content spa-example">
        <div class="config-section">
          <h4>📝 温泉池容量规则配置</h4>
          <ul>
            <li>规则名称：温泉池容量检查</li>
            <li>规则编码：SPA_CAPACITY_RULE</li>
            <li>规则类型：容量规则</li>
            <li>优先级：85</li>
            <li>容量限制：每个温泉池最多15人同时使用</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>⚠️ 技师冲突检测规则配置</h4>
          <ul>
            <li>规则名称：技师冲突检测</li>
            <li>规则编码：TECHNICIAN_CONFLICT_RULE</li>
            <li>规则类型：冲突检测规则</li>
            <li>优先级：90</li>
            <li>检测内容：技师时间冲突、重复排班</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>⏰ 营业时间规则配置</h4>
          <ul>
            <li>规则名称：温泉营业时间</li>
            <li>规则编码：SPA_BUSINESS_HOURS_RULE</li>
            <li>规则类型：时间段规则</li>
            <li>优先级：75</li>
            <li>时间范围：10:00-22:00（每日）</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>📋 操作步骤</h4>
          <ol>
            <li>创建容量规则 → 设置温泉池最大使用人数</li>
            <li>创建冲突检测规则 → 配置技师时间冲突检测</li>
            <li>创建营业时间规则 → 设置温泉营业时间范围</li>
            <li>设置规则优先级，确保执行顺序正确</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- 餐饮业态详细示例 -->
    <div class="guide-section">
      <div class="section-header">
        <h3>🍽️ 餐饮业态 - 餐桌调度规则配置</h3>
      </div>
      <div class="section-content dining-example">
        <div class="config-section">
          <h4>📝 用餐高峰期规则配置</h4>
          <ul>
            <li>规则名称：用餐高峰期限制</li>
            <li>规则编码：DINING_PEAK_RULE</li>
            <li>规则类型：时间段规则</li>
            <li>优先级：85</li>
            <li>时间范围：11:30-13:30, 18:00-20:00</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>📊 会员优先规则配置</h4>
          <ul>
            <li>规则名称：会员优先预订</li>
            <li>规则编码：MEMBER_PRIORITY_RULE</li>
            <li>规则类型：优先级规则</li>
            <li>优先级：90</li>
            <li>描述：会员客户享有优先预订权</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>📦 餐桌容量规则配置</h4>
          <ul>
            <li>规则名称：餐桌容量检查</li>
            <li>规则编码：TABLE_CAPACITY_RULE</li>
            <li>规则类型：容量规则</li>
            <li>优先级：70</li>
            <li>容量限制：根据餐桌大小限制用餐人数</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>📋 操作步骤</h4>
          <ol>
            <li>创建高峰期规则 → 设置用餐高峰期时间</li>
            <li>创建会员优先规则 → 设置会员优先级</li>
            <li>创建容量规则 → 配置餐桌使用限制</li>
            <li>关联到"餐桌资源分类"，实现智能调度</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- 技术资源示例 -->
    <div class="guide-section">
      <div class="section-header">
        <h3>🔧 技术资源 - 系统调度规则配置</h3>
      </div>
      <div class="section-content tech-example">
        <div class="config-section">
          <h4>📝 API访问频率规则配置</h4>
          <ul>
            <li>规则名称：API访问频率限制</li>
            <li>规则编码：API_RATE_LIMIT_RULE</li>
            <li>规则类型：容量规则</li>
            <li>优先级：95</li>
            <li>容量限制：每分钟最多100次API调用</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>⏰ 系统维护时间规则配置</h4>
          <ul>
            <li>规则名称：系统维护时间</li>
            <li>规则编码：SYSTEM_MAINTENANCE_RULE</li>
            <li>规则类型：时间段规则</li>
            <li>优先级：100</li>
            <li>时间范围：02:00-04:00（每日维护窗口）</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>⚠️ 资源冲突检测规则配置</h4>
          <ul>
            <li>规则名称：资源冲突检测</li>
            <li>规则编码：RESOURCE_CONFLICT_RULE</li>
            <li>规则类型：冲突检测规则</li>
            <li>优先级：90</li>
            <li>检测内容：数据库连接冲突、文件访问冲突</li>
          </ul>
        </div>
        <div class="config-section">
          <h4>📋 操作步骤</h4>
          <ol>
            <li>创建API频率限制规则 → 设置访问频率上限</li>
            <li>创建维护时间规则 → 设置系统维护窗口</li>
            <li>创建冲突检测规则 → 配置资源冲突检测</li>
            <li>设置高优先级，确保系统稳定性</li>
          </ol>
        </div>
      </div>
    </div>

    <!-- 最佳实践总结 -->
    <div class="guide-section">
      <div class="section-header">
        <h3>💡 最佳实践与使用技巧</h3>
      </div>
      <div class="section-content best-practices">
        <div class="practice-section">
          <h4>🎯 规则设计原则</h4>
          <ul>
            <li><strong>明确性</strong>：规则目标明确，避免歧义</li>
            <li><strong>可执行性</strong>：规则参数可量化，便于系统执行</li>
            <li><strong>灵活性</strong>：支持动态调整，适应业务变化</li>
            <li><strong>可监控性</strong>：规则执行效果可监控和评估</li>
          </ul>
        </div>
        <div class="practice-section">
          <h4>⚙️ 优先级设置技巧</h4>
          <ul>
            <li><strong>系统规则</strong>：优先级90-100，确保系统稳定</li>
            <li><strong>业务规则</strong>：优先级70-89，实现业务目标</li>
            <li><strong>优化规则</strong>：优先级50-69，提升用户体验</li>
            <li><strong>默认规则</strong>：优先级10-49，基础保障</li>
          </ul>
        </div>
        <div class="practice-section">
          <h4>🔧 规则组合策略</h4>
          <ul>
            <li><strong>分层组合</strong>：按业务层级组合不同规则</li>
            <li><strong>时序组合</strong>：按执行顺序组合规则</li>
            <li><strong>条件组合</strong>：按触发条件组合规则</li>
            <li><strong>互斥组合</strong>：避免规则冲突和重复</li>
          </ul>
        </div>
        <div class="practice-section">
          <h4>📊 监控与优化</h4>
          <ul>
            <li><strong>执行监控</strong>：监控规则执行频率和效果</li>
            <li><strong>性能分析</strong>：分析规则对系统性能的影响</li>
            <li><strong>效果评估</strong>：评估规则对业务目标的贡献</li>
            <li><strong>持续优化</strong>：根据监控结果持续优化规则</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.rules-usage-guide {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
}

.guide-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.guide-header h2 {
  color: #1890ff;
  font-size: 28px;
  margin-bottom: 12px;
}

.guide-subtitle {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.guide-section {
  margin-bottom: 40px;
  background: #fafafa;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #e8e8e8;
}

.section-header h3 {
  color: #1890ff;
  font-size: 20px;
  margin-bottom: 16px;
  border-left: 4px solid #1890ff;
  padding-left: 12px;
}

.section-content {
  color: #262626;
  line-height: 1.6;
}

.process-list {
  padding-left: 20px;
}

.process-list li {
  margin-bottom: 8px;
  color: #595959;
}

.rule-type-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  border-left: 4px solid #52c41a;
}

.rule-type-section h4 {
  color: #1890ff;
  margin-bottom: 8px;
  font-size: 16px;
}

.rule-type-section p {
  margin-bottom: 8px;
  color: #595959;
}

.rule-type-section ul {
  margin: 0;
  padding-left: 20px;
}

.rule-type-section li {
  margin-bottom: 4px;
  color: #8c8c8c;
}

.config-section {
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
}

.config-section h4 {
  color: #1890ff;
  margin-bottom: 12px;
  font-size: 16px;
}

.config-section ul {
  margin: 0;
  padding-left: 20px;
}

.config-section li {
  margin-bottom: 6px;
  color: #595959;
}

.config-section ol {
  margin: 0;
  padding-left: 20px;
}

.config-section ol li {
  margin-bottom: 8px;
  color: #595959;
}

.practice-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  border-left: 4px solid #faad14;
}

.practice-section h4 {
  color: #1890ff;
  margin-bottom: 12px;
  font-size: 16px;
}

.practice-section ul {
  margin: 0;
  padding-left: 20px;
}

.practice-section li {
  margin-bottom: 8px;
  color: #595959;
}

.practice-section strong {
  color: #1890ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .rules-usage-guide {
    padding: 16px;
  }

  .guide-header h2 {
    font-size: 24px;
  }

  .guide-section {
    padding: 16px;
  }

  .section-header h3 {
    font-size: 18px;
  }
}
</style>
